<template>
  <el-card shadow="always">
    <el-row>
      <!-- 第一列，按钮组 -->
      <el-col :span="9">
        <el-button-group>
          <el-button
            :type="button === 0 ? 'primary' : ''"
            round
            size="medium"
            @click="button = 0"
          >全部</el-button>
          <el-button
            :type="button === 1 ? 'primary' : ''"
            round
            size="medium"
            @click="button = 1"
          >待{{ status ? "入" : "出" }}库</el-button>
          <el-button
            :type="button === 2 ? 'primary' : ''"
            round
            size="medium"
            @click="button = 2"
          >{{ status ? "入" : "出" }}库中</el-button>
          <el-button
            :type="button === 3 ? 'primary' : ''"
            round
            size="medium"
            @click="button = 3"
          >已{{ status ? "入" : "出" }}库</el-button>
        </el-button-group></el-col>
      <!-- 第二列，日期选择器 -->
      <el-col :span="9">
        <el-date-picker
          v-model="datePicker"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="medium"
          value-format="yyyy-MM-dd"
        />
      </el-col>
      <!-- 第三列，搜索框 -->
      <el-col :span="4">
        <el-input
          v-model="input"
          placeholder="筛选订单"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <!-- 第四列，按钮 -->
      <el-col :span="1">
        <el-button
          v-show="flag"
          type="success"
          style="margin-left: 10px"
          @click="$emit('create')"
        >创建</el-button>
      </el-col>
    </el-row></el-card>
</template>

<script>
export default {
  name: 'InputButton',
  props: {
    'flag': {
      type: Boolean,
      default: true
    },
    'status': {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 日期选择器
      datePicker: '',
      // 订单筛选
      input: '',
      // 按钮标记
      button: 0
    }
  }
}
</script>
